﻿<template>
    <div class="content">
        <div class="screen">
            <el-button type="success" @click="dialogTableVisible = true">添加司机</el-button>
            <el-form inline>
                <el-form-item label="请输入">
                    <el-input @change="initData" v-model="formData.driverName" placeholder="司机姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <selectCity @getSite="getAddress"></selectCity>
                </el-form-item>

            </el-form>
        </div>
        <!-- 表格列表 -->
        <div class="list">
            <el-table height="550" :data="tableData"
                :header-cell-style="{ textAlign: 'center', background: '#abcdef', color: '#555' }"
                :cell-style="{ textAlign: 'center' }">
                <el-table-column prop="driverName" label="司机姓名" width="180px"> </el-table-column>
                <el-table-column prop="gender" label="性别" width="180px"> </el-table-column>

                <el-table-column prop="birthday" label="生日" width="300px"> </el-table-column>
                <el-table-column prop="phone" label="电话" width="180px"> </el-table-column>
                <el-table-column prop="licenseGrade" label="驾驶证" width="180px"> </el-table-column>
                <el-table-column prop="province" label="城市" width="180px"></el-table-column>
                <el-table-column prop="city" label="地区" width="180px"></el-table-column>

                <el-table-column prop="createDate" label="创建时间" width="180px">
                </el-table-column>
                <el-table-column width="220px" label="操作" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="warning" @click="revise(scope.row)">修改</el-button>
                        <el-button size="mini" type="danger" @click="deletes(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 添加司机 -->
            <el-dialog title="添加司机" center :visible.sync="dialogTableVisible" width="40%">
                <el-form label="left" :model="dialogForm" label-width="80px" class="demo-ruleForm">
                    <el-form-item required label="姓名" prop="driverName">
                        <el-input v-model="dialogForm.driverName"></el-input>
                    </el-form-item>
                    <el-form-item required label="性别" prop="gender">
                        <el-radio-group v-model="dialogForm.gender">
                            <el-radio label="男"></el-radio>
                            <el-radio label="女"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="身份证号">
                        <el-input v-model="dialogForm.licenseCard"></el-input>
                    </el-form-item>
                    <el-form-item required label="电话">
                        <el-input v-model="dialogForm.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="生日" required>
                        <el-col :span="11">
                            <el-form-item prop="birthday">
                                <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd "
                                    v-model="dialogForm.birthday"></el-date-picker>
                            </el-form-item>
                        </el-col>


                    </el-form-item>
                    <el-form-item required label="驾驶证" prop="licenseGrade">
                        <el-select v-model="dialogForm.licenseGrade" placeholder="请选择驾驶证类型">
                            <el-option label="C1" value="C1"></el-option>
                            <el-option label="C2" value="C2"></el-option>
                            <el-option label="A1" value="A1"></el-option>
                            <el-option label="A2" value="A2"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item required label="居住地址">
                        <pickArea @getSite="getSite"></pickArea>
                        <el-input v-model="dialogForm.address"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="addDriver">立即添加</el-button>
                </span>
            </el-dialog>
            <!-- 修改司机信息 -->
            <el-dialog title="修改司机信息" :visible.sync="dialogVisible" width="80%" center>
                <span>
                    <el-descriptions class="margin-top" border>
                        <el-descriptions-item>
                            <template slot="label"> 姓名 </template>
                            <el-input v-model="dialogData.driverName">
                            </el-input>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 性别 </template>
                            <el-radio-group v-model="dialogData.gender">
                                <el-radio label="男"></el-radio>
                                <el-radio label="女"></el-radio>
                            </el-radio-group>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 身份证号 </template>
                            <el-input v-model="dialogData.licenseCard"></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 生日 </template>
                            <el-date-picker v-model="dialogData.birthday" type="datetime" value-format="yyyy-MM-dd "
                                placeholder="选择日期时间">
                            </el-date-picker>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 电话 </template>
                            <el-input v-model="dialogData.phone"></el-input>

                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 驾驶证 </template>
                            <el-select v-model="dialogData.licenseGrade" placeholder="请选择">
                                <el-option value="B1"></el-option>
                                <el-option value="C1"></el-option>
                                <el-option value="B2"></el-option>
                                <el-option value="C2"></el-option>
                            </el-select>
                        </el-descriptions-item>


                        <el-descriptions-item>
                            <template slot="label"> 居住地址 </template>
                            <pickArea @getSite="reviseGetSite"></pickArea>
                            <el-input v-model="dialogData.address"></el-input>
                        </el-descriptions-item>
                    </el-descriptions>
                </span>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submit">提 交</el-button>
                </span>
            </el-dialog>
            <el-pagination  :current-page.sync="formData.pageNum"
      :page-size="formData.pageSize"  @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
                :total="formData.total">
            </el-pagination>
        </div>

    </div>
</template>

<script >
import selectCity from '../../components/selectCity.vue'
import pickArea from '../../components/pickArea.vue'
export default {
    components: { selectCity, pickArea },
    data() {
        return {
            // 请求参数
            formData: {
                total: 0,
                pageNum: 1,
                pageSize: 10,
                driverName: '',
                province: '',
                city: '',
            },
            tableData: [],
            // 添加时
            dialogTableVisible: false,
            dialogForm: {},
            // 修改时
            dialogVisible: false,
            dialogData: {},
            currentPage:1

        }
    },
    mounted() {
        this.initData()

    },
    methods: {
        // 封装数据请求
        initData() {
            this.$http.get('/driverUser/getAllDriver', this.formData).then(res => {
                console.log(res.data.object.list)
                this.tableData = JSON.parse(JSON.stringify(res.data.object.list))
                this.formData.total = res.data.object.total
            })
        },
        // 检索获得省市
        getAddress(prov, city) {
            // console.log(prov, city)
            this.formData.province = prov
            this.formData.city = city
            this.initData()
        },
        //修改按钮
        revise(data) {
            console.log(data)
            this.dialogVisible = true
            this.dialogData = data


        },
        //修改
        reviseGetSite(prov, city, district) {

            console.log(prov, city, district)
            this.dialogData.province = prov
            this.dialogData.city = city
            this.dialogData.area = district
        },
        submit() {
            this.$http
                .post("/driverUser/updateDriver", this.dialogData)
                .then(res => {
                    if (res.data.code == 1) {
                        this.$message.success('修改成功')
                        this.dialogVisible = false
                        this.initData()
                    } else {
                        this.$message.error('修改失败')
                    }
                })
        },
        // 删除按钮
        deletes(id) {
            // console.log(row)

            this.$http
                .delete("/driverUser/deleteDriver",{ driverId:id} )
                .then((res) => {
                    // console.log(res)
                    if (res.data.code == 1) {
                        this.$message.success('删除成功')
                        this.initData()
                    } else {
                        this.$message.error('删除失败')
                    }
                });
        },
        // 添加司机
        getSite(prov, city, district) {
            console.log(prov, city, district)
            this.dialogForm.province = prov
            this.dialogForm.city = city
            this.dialogForm.area = district
        },

        addDriver() {
            this.$http.post('/driverUser/addDriver', this.dialogForm).then(res => {
                // console.log(res)
                if (res.data.code == 1) {
                    this.$message.success('添加成功')
                    this.dialogTableVisible = false
                    this.initData()
                } else {
                    this.$message.error('添加失败')
                }
            })
        },
        // 分页
        handleSizeChange(val) {
            this.formData.pageSize = val;
            this.initData()
        },
        handleCurrentChange(val) {
            this.formData.pageNum = val;
            this.initData()
        },






    },





}
</script>

<style lang="scss" scoped>
.content {
    height: 100%;
    display: flex;
    flex-direction: column;

    .screen {
        height: 70px;
        background-color: #fff;
        border: 1px solid rgb(186, 182, 182);
        box-shadow: 0 0 1px 1px #ccc;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-bottom: 20px;
    }

    .list {
        flex: 1;
        background-color: #fff;
        border: 1px solid #ccc;
        box-shadow: 0 0 1px 1px #ccc;
        overflow: auto;
    }
}
</style>
<style lang="scss">
.el-dialog {
    .el-form {
        flex-direction: column;

        .el-form-item {
            margin-bottom: 10px;
            width: 400px;
        }
    }
}

.el-form {
    --el-form-label-font-size: var(--el-font-size-base);
    display: flex;
    align-items: center;
    /* flex-direction: column; */
}

.el-form-item {
    margin-left: 10px;
    margin-bottom: 0px;
    /* display: block; */
}

.el-table {
    --el-table-row-hover-bg-color: rgba(249, 233, 214, .5);

    .el-button {
        --el-button-hover-text-color: rgb(176, 9, 9);
        --el-button-hover-bg-color: #fff;
        --el-button-hover-border-color: #fff;
        --el-button-active-text-color: rgb(176, 9, 9);
        --el-button-active-border-color: #fff;
        --el-button-active-bg-color: #fff;
        --el-button-outline-color: #fff;
    }
}
</style>
